<div class="lv-card-header" *ngIf="lvTitle || lvExtra">
  <div class="lv-card-header-wrapper">
    <div class="lv-card-header-title" *ngIf="lvTitle">
      <ng-container *ngTemplateOutlet="content; context: { $implicit: lvTitle }"></ng-container>
    </div>
    <div class="lv-card-extra" *ngIf="lvExtra">
      <ng-container *ngTemplateOutlet="content; context: { $implicit: lvExtra }"></ng-container>
    </div>
  </div>
</div>
<div class="lv-card-cover" *ngIf="lvCover">
  <ng-template [ngTemplateOutlet]="lvCover"></ng-template>
</div>
<div class="lv-card-body">
  <ng-container *ngIf="!lvLoading; else loadingTemplate">
    <ng-content></ng-content>
  </ng-container>
  <ng-template #loadingTemplate>
    <!-- TODO loading -->
  </ng-template>
</div>
<div class="lv-card-action" *ngIf="lvAction">
  <ng-template [ngTemplateOutlet]="lvAction"></ng-template>
</div>

<ng-template #content let-data>
  <ng-container *ngIf="typeUtils.isRealString(data)">
    <span lv-overflow>{{ data }}</span>
  </ng-container>
  <ng-container *ngIf="typeUtils.isTemplateRef(data)">
    <ng-container *ngTemplateOutlet="data"></ng-container>
  </ng-container>
</ng-template>
